<div id="map-container" style="display:none;">
	<div class="map-header">
		<div style="float:right; margin-right: 15px;">
			<a id="cerrar-mapa" href="#">CERRAR</a>
		</div>
	</div>
	
	<div id="map-canvas"></div>	
</div>

<script type="text/javascript">

	$(function() {
		$("#cerrar-mapa").click(function() {
			$("#map-container").fadeOut();		
		});
	});

	function showMapa()
	{
		$("#map-container").fadeIn();
		initMapa();			
	}

	function initMapa() 
	{
		// Json que contiene la lista de tenicos de la busqueda
		var json_lista_tecnicos = <?php echo $json_lista_tecnicos;?>;
		 
		var mapOptions = {
			zoom: 7,
			center: new google.maps.LatLng(-32.602362, -56.162136),
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		    
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		
		$.each(json_lista_tecnicos, function() {

			// Tecnico
			var tecnico = this;
			
			// Creo el marker
			var marker = new google.maps.Marker({position: new google.maps.LatLng(this.coordenadas.split(',')[0], this.coordenadas.split(',')[1]), title: "Tecnico: " + this.nombres + ", " + this.apellidos}) ;
			marker.setMap(map);

			// Eventos onclick sobre marker
			google.maps.event.addListener(marker, "click", function() { 
				var infoWin = new google.maps.InfoWindow({ content: "Servicio: Tecnico_PC <br/> Nombre: " + tecnico.nombres + ", " + tecnico.apellidos + " <br/> Valoracion: <b>+5</b> <br/> Precio/hora: $280 <br/> <a class='button' href='" + <?php echo site_url(array('contrato', 'contratar'));?>+ "'>Contratar</a>" });
				infoWin.open(map, marker);				
			});
		});		
	}

</script> 